<template>
    <div class='main'>            
        <div class="cover_c">  
            <div class="cover">
                <img src="https://xxx.oss.com/dxdh/%E8%92%99%E7%89%88%E7%BB%84%201.png"  alt="" style="width:100%;height:100%">
            </div>
        </div>
        <div class="content" v-if="display">
            <div class="title">
                <div>切换省份</div>
            </div>
            <div class="form">
                <div class="left">
                    <el-form ref="form" :model="form" label-width="120px" style="width:500px;" size="medium" id="selectform">
                        <el-form-item label="科目: " style="margin-top:48px">
                            <el-select v-model="form.subject" placeholder="请选择您的科目" style="width:100%">
                            <el-option label="理科" value=0></el-option>
                            <el-option label="文科" value=1></el-option>
                            <el-option label="新高考" value=2></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="省份: " style="margin-top:48px">
                            <el-select v-model="form.provinceId" placeholder="请选择" style="width:100%">
                            <el-option
                                v-for="item in allProvince"
                                :key="item.id"
                                :label="item.provinceName"
                                :value="item.id">
                            </el-option>
                            <!-- <el-option label="区域二" value="beijing"></el-option> -->
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="right">
                    <el-form ref="form" :model="form" label-width="120px" style="width:500px;float:right" size="medium" id="selectform">
                        <el-form-item label="高考年份: " style="margin-top:48px">
                            <el-select v-model="form.year" placeholder="请选择您的高考年份" style="width:100%">
                            <el-option label="2021" value=2021></el-option>
                            <el-option label="2020" value=2020></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="select">
                <el-button class="button" type="primary" @click="jumpTo()">保存</el-button>
            </div>
        </div>
        <div class="content" v-if="!display">
            <div class="emergency"><div style="font-family:Noto Sans SC;font-size:24px">系统维护中</div></div>
        </div>
    </div>    
</template>

<script>
import timeCalculate from '../common/timeCalculate'
export default {
    data(){
        return{
            form:{
                province:"",
                year:"",
                score:"",
                subject:"",
                batches:"",
                region:"",
            },
            allProvince:[],
            display:true
        }
    },
    methods:{
        
    },
    mounted(){
        this.allProvince=JSON.parse(sessionStorage.province);
    }
}
</script>

<style scoped>
.main{
    position: relative;
}
.content{
    width: 1440px;
    min-height: 804px;
    background-color: #fff;
    margin: 100px auto;
    /* position: relative; */ 
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}
.title{
    width: 100%;
    height: 210px;
    font-size: 40px;
    font-family: Noto Sans SC;
    /* line-height: 71px; */
    color: #000000;
    /* margin: 0 auto; */
    font-weight: 700;
    /* margin-top: 80px; */
    letter-spacing: 2px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.middle{
    display: flex;
    flex-direction: row;
}
.blue{
    width: 8px;
    height: 40px;
    background: #33AAFF;
    margin-left: 68px;
}
.subtitle{
    /* width: 256px; */
    /* height: 32px; */
    font-size: 32px;
    font-family: Noto Sans SC;
    font-weight: 500;
    line-height: 43px;
    color: #000000;
    margin-left: 10px;
    letter-spacing: 1px;
}
.form{
    width: 1200px;
    min-height: 250px;
    /* background-color: aqua; */
    margin: 0 auto;
    margin-top: 55px;
    display: flex;
    flex-direction: row;
}
.form .left{
    flex: 1;
    /* background-color: black; */
}
.form .right{
    flex: 1;
    /* background-color: #fff; */
}
#selectform>>>.el-form-item__label {
    font-size: 23px;
    font-family: Noto Sans SC;
    color: #333333;
    line-height: 45px;
}
#selectform>>>.el-input__inner{
    border: 1px solid rgba(51, 170, 255, 1);
    border-radius: 8px;
    height: 100%;
    font-family: Noto Sans SC;
}
#selectform>>>.el-input{
    width: 325px;
    height: 45px;
}
.submit{
    width: 347px;
    height: 62px;
    /* background: #33AAFF; */
    opacity: 1;
    border-radius: 10px;
    font-size: 22px;
    font-family: Noto Sans SC;
    font-weight: 300;
    line-height: 41px;
    color: #FFFFFF;
    /* letter-spacing: 39px; */
}
.explain{
    font-size: 18px;
    font-family: Noto Sans SC;
    font-weight: 400;
    line-height: 25px;
    color: rgba(0, 0, 0, 0.45);
    /* width: 720px; */
    height: 18px;
    margin-left: 87px;
    margin-top: 18px;
    text-align: left;
}
.explain2{
    font-size: 15px;
    font-family: Noto Sans SC;
    font-weight: 400;
    line-height: 25px;
    color: rgba(0, 0, 0, 0.45);
    /* width: 720px; */
    height: 18px;
    margin-left: 10px;
    margin-top: 18px;
    text-align: left;
}
.input{
    width: 322.11px;
    float: left;
}
.cover{
    position: absolute;
    top: -210px;
    z-index: 0;
    /* width: 100%; */
    height: 276px;
    /* text-align: center; */
    left: 50%;
    margin-left: -960px; 
    overflow: hidden;
}
.cover_c{
    position: relative;
    width: 100%;
}
.emergency{
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}
.select{
    width: 750px;
    margin: 0 auto;
    margin-top:60px;
    /* margin-bottom: 70px; */
    height: 150px;
}
.select .button{
    width: 347px;
    height: 62px;
    font-size: 24px;
    font-family: Source Han Sans;
    font-weight: 100;
    line-height: 41px;
    border-radius: 10px;
}
</style>